.header {
  overflow: hidden;
  padding: .26rem .2rem;
  background-color: #4383ef;
  a {
    float: left;
    color: #ffffff;
    font-size: .28rem;
    display: block;
    line-height: .36rem;
    &.returnPrev {
      margin-right: 1.3rem;
      width: .19rem;
      height: .35rem;
      background: url("../img/zuojiantou.png") no-repeat center;
      background-size: .19rem .35rem;
    }
    &.product {
      margin-right: .9rem;
      padding-right: .24rem;
      background: url("../img/baby.png") no-repeat right;
      background-size: .17rem .24rem;
    }
    &.evaluation {
      margin-right: .9rem;
    }
    &.detailsLink {
      margin-right: .8rem;
    }
    &.shopCart {
      background: url("../img/gouwuche.png") no-repeat center;
      background-size: .39rem .37rem;
      width: .39rem;
      height: .37rem;
    }
    &.more {
      background: url("../img/yuandian.png") no-repeat center;
      background-size: .35rem .07rem;
      width: .35rem;
      height: .37rem;
      float: right;
    }
  }
}

.middle {
  margin-top: .89rem;
  .swiper-container {
    .middle .swiper-container .swiper-pagination-bullet-active {
      width: .2rem;
      height: .2rem;
    }
    .swiper-pagination-bullet {
      width: .19rem;
      height: .19rem;
      background: #ffffff;
      border: .01rem solid #ffffff;
    }
    .swiper-wrapper {
      .swiper-slide {
        img {
          width: 7.5rem;
          height: 4.65rem;
        }
      }
    }
  }
  .name {
    overflow: hidden;
    margin-top: .35rem;
    p {
      background: url("../img/shandian.png") no-repeat left top;
      background-size: .33rem .56rem;
      float: left;
      width: 5.1rem;
      font-size: .26rem;
      color: #000000;
      line-height: .45rem;
      text-indent: .38rem;
    }
    a {
      padding-top: .55rem;
      float: right;
      font-size: .24rem;
      color: #777777;
      background: url("../img/qiandai.png") no-repeat top;
      background-size: .43rem .49rem;
    }

  }
  .price {
    margin-top: .1rem;
    overflow: hidden;
    p {
      font-size: .36rem;
      color: #f41b1b;
      float: left;
      line-height: .38rem;
      &:nth-of-type(2) {
        vertical-align: middle;
        font-size: .2rem;
        color: #f41b1b;
        margin-left: .55rem;
        display: inline-block;
        width: .73rem;
        height: .25rem;
        text-align: center;
        border: .01rem solid #f41b1b;
        line-height: .25rem;
        margin-top: .06rem;
        border-radius: .03rem;
      }
    }
  }
  .original {
    overflow: hidden;
    margin-top: .2rem;
    p {
      font-size: .24rem;
      color: #504e4e;
      s {
        font-size: .24rem;
        color: #504e4e;
      }
    }
  }
  .details {
    overflow: hidden;
    margin-top: .35rem;
    border-bottom: .02rem solid #e2e2e2;
    padding-bottom: .4rem;
    p {
      float: left;
      font-size: .24rem;
      color: #504e4e;
      &:nth-of-type(1) {
        margin: 0;
      }
      &:nth-of-type(2) {
        margin-left: 1.25rem;
      }
      &:nth-of-type(3) {
        margin-left: 1.15rem;
      }
      span {
        font-size: .24rem;
        color: #d81e06;
      }
    }
  }
  .express {
    overflow: hidden;
    p {
      line-height: .95rem;
      font-size: .24rem;
      color: #504e4e;
      &:nth-of-type(2) {
        margin-left: .7rem;
        color: #dc3520;
      }
      span {
        font-size: .24rem;
        color: #504e4e;
      }
      img {
        float: right;
        width: .19rem;
        height: .35rem;
      }
    }
  }
  .promise {
    overflow: hidden;
    height: .5rem;
    background: #f1f1f1;
    line-height: .5rem;
    li {
      &:nth-of-type(1) {
        margin-left: .2rem;
      }
      margin-left: .5rem;
      float: left;
      width: 1.4rem;
      font-size: .24rem;
      color: #6c6a6a;
      text-align: right;
      background-image: url("../img/duigou.png");
      background-size: .32rem .32rem;
      background-repeat: no-repeat;
      background-position: 0 .09rem;
    }
  }
  .color-type {
    overflow: hidden;
    margin-top: .3rem;
    dt {
      float: left;
      font-size: .24rem;
      color: #504e4e;
      margin-top: .1rem;
    }
    dd {
      width: .75rem;
      height: .55rem;
      font-size: .24rem;
      color: #504e4e;
      float: left;
      border: .01rem solid #f1f1f1;
      text-align: center;
      line-height: .55rem;
      margin-left: .3rem;
      &.on {
        border: .01rem solid #eb8f83;
      }
    }
  }
  .number {
    overflow: hidden;
    p {
      margin-top: .4rem;
      display: inline-block;
      float: left;
      font-size: .24rem;
      color: #504e4e;
    }
    .num {
      margin-top: .35rem;
      vertical-align: middle;
      overflow: hidden;
      float: left;
      font-size: 0;
      margin-left: .17rem;
      .reduce {
        float: left;
        vertical-align: bottom;
        margin-left: .14rem;
        width: .55rem;
        height: .45rem;
        border: .01rem solid #b7b7b9;
        background-color: #f0eff4;
        line-height: .45rem;
        text-align: center;
        font-size: .24rem;
        color: #504e4e;
      }
      input {
        float: left;
        width: .75rem;
        height: .43rem;
        border-bottom: .01rem solid #b7b7b9;
        border-top: .01rem solid #b7b7b9;
        line-height: .45rem;
        text-align: center;
        font-size: .24rem;
        color: #504e4e;

      }
      .plus {
        float: left;
        vertical-align: bottom;
        width: .55rem;
        height: .45rem;
        border: .01rem solid #b7b7b9;
        background-color: #f0eff4;
        line-height: .45rem;
        text-align: center;
        font-size: .24rem;
        color: #504e4e;
      }
    }
  }
  .comment {
    margin-top: .3rem;
    padding: .15rem .2rem;
    overflow: hidden;
    border-bottom: .01rem solid #e2e2e2;
    border-top: .01rem solid #e2e2e2;
    p {
      float: left;
      font-size: .24rem;
      color: #504e4e;
      i {
        margin-left: .2rem;
        font-style: normal;
        font-size: .24rem;
        color: #ef2525;
      }
    }
    span {
      float: right;
      font-size: .2rem;
      color: #504e4e;
      padding-right: .95rem;
      background-image: url("../img/xiaoyoujiantou.png");
      background-position: 2.35rem .06rem;
      background-repeat: no-repeat;
      background-size: .08rem .15rem;
      strong {
        font-style: normal;
        font-weight: normal;
      }
    }
  }
  .comment-group {
    overflow: hidden;
    margin-top: .15rem;
    li {
      a {
        margin-top: .2rem;
        margin-left: .4rem;
        float: left;
        font-size: .24rem;
        color: #5c5a5a;
        width: 1.75rem;
        height: .5rem;
        background: #f1f1f1;
        line-height: .5rem;
        text-align: center;
      }
    }
  }
  .comment-details {
    overflow: hidden;
    li {
      overflow: hidden;
      padding-bottom: .45rem;
      margin-top: .35rem;
      border-bottom: .01rem solid #e2e2e2;
      h6 {
        float: left;
        font-weight: normal;
        padding-right: 2rem;
        font-size: .28rem;
        color: #2b2b2b;
        background-image: url("../img/wuxing.png");
        background-repeat: no-repeat;
        background-position: 1.15rem .05rem;
        -webkit-background-size: 1.35rem;
        background-size: 1.35rem .26rem;
      }
      p {
        float: left;
        font-size: .28rem;
        color: #2b2b2b;
        padding-right: 1.8rem;
        line-height: .45rem;
        margin-top: .2rem;
      }
      span {
        font-size: .24rem;
        color: #696767;
        &:nth-of-type(1) {
          float: right;
        }
      }
      i {
        font-size: .24rem;
        color: #696767;
        font-style: normal;
        float: left;
        margin-top: .35rem;
      }
      button {
        outline: none;
        border: none;
        background: none;
        margin-top: .3rem;
        float: right;
        font-size: .28rem;
        color: #0d59f2;
      }
    }
  }
  .all-comment {
    overflow: hidden;
    text-align: center;
    height: .6rem;
    line-height: 0;
    a {
      font-size: .28rem;
      color: #474747;
    }
  }
  .pro-details {
    overflow: hidden;
    border-top: .01rem solid #e2e2e2;
    border-bottom: .01rem solid #e2e2e2;
    li {
      float: left;
      border-right: .01rem solid #e2e2e2;
      &:nth-of-type(3) {
        border: none;
      }
      width: 2.4rem;
      height: .6rem;
      text-align: center;
      line-height: 0;
      a {
        font-size: .28rem;
        color: #474747;
      }
    }
  }
  .display {
    overflow: hidden;
    margin-top: .2rem;
    dt {
      text-align: center;
      font-size: .36rem;
      background: #f5e424;
      color: #000000;
      height: .75rem;
      line-height: .75rem;
    }
    dd {
      img {
        width: 7.5rem;
        height: 7.75rem;
        padding-bottom: .1rem;
      }
    }
  }
  .pro-parameters {
    text-align: center;
    height: .75rem;
    line-height: .75rem;
    h5 {
      font-size: .36rem;
      background: #f5e424;
      color: #000000;
    }
    img {
      width: 7.5rem;
      height: 3.4rem;
    }
    .wait {
      overflow: hidden;
      height: 3.75rem;
    }
  }
}

.footer {
  border-top: .01rem solid #e2e2e2;
  position: fixed;
  bottom: 0;
  width: 100%;
  left: 0;
  background: #fff;
  overflow: hidden;
  .left {
    float: left;
    overflow: hidden;
    a {
      border-right: .01rem solid #e2e2e2;
      width: 1.64rem;
      height: .35rem;
      padding-top: .65rem;
      text-align: center;
      float: left;
      font-size: .24rem;
      color: #808080;
      &:nth-of-type(1) {
        background-image: url("../img/kefu.png");
        background-repeat: no-repeat;
        background-position: .58rem .12rem;
        background-size: .49rem .47rem;
      }
      &:nth-of-type(2) {
        border: none;
        background-image: url("../img/shoucang.png");
        background-repeat: no-repeat;
        background-position: .58rem -0.93rem;
        background-size: .5rem 1.5rem;
        &.on {
          background-position: .58rem 0;
        }
      }
    }
    .collection-success {
      height: .5rem;
      border: .01rem solid #814312;
      opacity: 0;
      border-radius: .1rem;
      width: 4rem;
      background-color: rgba(255, 255, 255, 1);
      text-align: center;
      position: fixed;
      left: 1.6rem;
      top: 8rem;
      font-size: .36rem;
      color: red;
    }
  }
  .central {
    overflow: hidden;
    float: left;
    button {
      width: 2.2rem;
      height: 1rem;
      text-align: center;
      line-height: .9rem;
      color: #ffffff;
      display: block;
      font-size: .28rem;
      background-color: #f1eb3a;
    }
    .shop-carts{
      height: .5rem;
      border: .01rem solid #814312;
      opacity: 0;
      border-radius: .1rem;
      width: 4rem;
      background-color: rgba(255, 255, 255, 1);
      text-align: center;
      position: fixed;
      left: 1.6rem;
      top: 8rem;
      font-size: .36rem;
      color: red;
    }
  }
  .right {
    float: right;
    a {
      width: 2rem;
      height: 1rem;
      text-align: center;
      line-height: .9rem;
      color: #ffffff;
      display: block;
      font-size: .28rem;
      background-color: #f51d1d;
    }
  }
}
